<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>飞冰 DEMO 预览</title>
    <style>
    /*! normalize.css v3.0.2 | MIT License | git.io/normalize */

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    /**
     * 1. Set default font family to sans-serif.
     * 2. Prevent iOS text size adjust after orientation change, without disabling
     *    user zoom.
     */

    html {
      font-family: sans-serif; /* 1 */
      -ms-text-size-adjust: 100%; /* 2 */
      -webkit-text-size-adjust: 100%; /* 2 */
    }

    /**
     * Remove default margin.
     */

    body {
      margin: 0;
    }

    /* HTML5 display definitions
       ========================================================================== */

    /**
     * Correct `block` display not defined for any HTML5 element in IE 8/9.
     * Correct `block` display not defined for `details` or `summary` in IE 10/11
     * and Firefox.
     * Correct `block` display not defined for `main` in IE 11.
     */

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
      display: block;
    }

    /**
     * 1. Correct `inline-block` display not defined in IE 8/9.
     * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
     */

    audio,
    canvas,
    progress,
    video {
      display: inline-block; /* 1 */
      vertical-align: baseline; /* 2 */
    }

    /**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */

    audio:not([controls]) {
      display: none;
      height: 0;
    }

    /**
     * Address `[hidden]` styling not present in IE 8/9/10.
     * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
     */

    [hidden],
    template {
      display: none;
    }

    /* Links
       ========================================================================== */

    /**
     * Remove the gray background color from active links in IE 10.
     */

    a {
      background-color: transparent;
    }

    /**
     * Improve readability when focused and also mouse hovered in all browsers.
     */

    a:active,
    a:hover {
      outline: 0;
    }

    /* Text-level semantics
       ========================================================================== */

    /**
     * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
     */

    abbr[title] {
      border-bottom: 1px dotted;
    }

    /**
     * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
     */

    b,
    strong {
      font-weight: bold;
    }

    /**
     * Address styling not present in Safari and Chrome.
     */

    dfn {
      font-style: italic;
    }

    /**
     * Address variable `h1` font-size and margin within `section` and `article`
     * contexts in Firefox 4+, Safari, and Chrome.
     */

    h1 {
      font-size: 2em;
      margin: 0.67em 0;
    }

    /**
     * Address styling not present in IE 8/9.
     */

    mark {
      background: #ff0;
      color: #000;
    }

    /**
     * Address inconsistent and variable font size in all browsers.
     */

    small {
      font-size: 80%;
    }

    /**
     * Prevent `sub` and `sup` affecting `line-height` in all browsers.
     */

    sub,
    sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }

    sup {
      top: -0.5em;
    }

    sub {
      bottom: -0.25em;
    }

    /* Embedded content
       ========================================================================== */

    /**
     * Remove border when inside `a` element in IE 8/9/10.
     */

    img {
      border: 0;
    }

    /**
     * Correct overflow not hidden in IE 9/10/11.
     */

    svg:not(:root) {
      overflow: hidden;
    }

    /* Grouping content
       ========================================================================== */

    /**
     * Address margin not present in IE 8/9 and Safari.
     */

    figure {
      margin: 1em 40px;
    }

    /**
     * Address differences between Firefox and other browsers.
     */

    hr {
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      height: 0;
    }

    /**
     * Contain overflow in all browsers.
     */

    pre {
      overflow: auto;
    }

    /**
     * Address odd `em`-unit font size rendering in all browsers.
     */

    code,
    kbd,
    pre,
    samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }

    /* Forms
       ========================================================================== */

    /**
     * Known limitation: by default, Chrome and Safari on OS X allow very limited
     * styling of `select`, unless a `border` property is set.
     */

    /**
     * 1. Correct color not being inherited.
     *    Known issue: affects color of disabled elements.
     * 2. Correct font properties not being inherited.
     * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
     */

    button,
    input,
    optgroup,
    select,
    textarea {
      color: inherit; /* 1 */
      font: inherit; /* 2 */
      margin: 0; /* 3 */
    }

    /**
     * Address `overflow` set to `hidden` in IE 8/9/10/11.
     */

    button {
      overflow: visible;
    }

    /**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
     * Correct `select` style inheritance in Firefox.
     */

    button,
    select {
      text-transform: none;
    }

    /**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     */

    /* 1 */ html input[type="button"],
    button,
    input[type="reset"],
    input[type="submit"] {
      -webkit-appearance: button; /* 2 */
      cursor: pointer; /* 3 */
    }

    /**
     * Re-set default cursor for disabled elements.
     */

    button[disabled],
    html input[disabled] {
      cursor: default;
    }

    /**
     * Remove inner padding and border in Firefox 4+.
     */

    button::-moz-focus-inner,
    input::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    /**
     * Address Firefox 4+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */

    input {
      line-height: normal;
    }

    /**
     * It's recommended that you don't attempt to style these elements.
     * Firefox's implementation doesn't respect box-sizing, padding, or width.
     *
     * 1. Address box sizing set to `content-box` in IE 8/9/10.
     * 2. Remove excess padding in IE 8/9/10.
     */

    input[type="checkbox"],
    input[type="radio"] {
      box-sizing: border-box; /* 1 */
      padding: 0; /* 2 */
    }

    /**
     * Fix the cursor style for Chrome's increment/decrement buttons. For certain
     * `font-size` values of the `input`, it causes the cursor style of the
     * decrement button to change from `default` to `text`.
     */

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      height: auto;
    }

    /**
     * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
     * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
     *    (include `-moz` to future-proof).
     */

    input[type="search"] {
      -webkit-appearance: textfield; /* 1 */
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box; /* 2 */
      box-sizing: content-box;
    }

    /**
     * Remove inner padding and search cancel button in Safari and Chrome on OS X.
     * Safari (but not Chrome) clips the cancel button when the search input has
     * padding (and `textfield` appearance).
     */

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }

    /**
     * Define consistent border, margin, and padding.
     */

    fieldset {
      border: 1px solid #c0c0c0;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
    }

    /**
     * 1. Correct `color` not being inherited in IE 8/9/10/11.
     * 2. Remove padding so people aren't caught out if they zero out fieldsets.
     */

    legend {
      border: 0; /* 1 */
      padding: 0; /* 2 */
    }

    /**
     * Remove default vertical scrollbar in IE 8/9/10/11.
     */

    textarea {
      overflow: auto;
    }

    /**
     * Don't inherit the `font-weight` (applied by a rule above).
     * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
     */

    optgroup {
      font-weight: bold;
    }

    /* Tables
       ========================================================================== */

    /**
     * Remove most spacing between table cells.
     */

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    td,
    th {
      padding: 0;
    }

    code[class*="language-"],pre[class*="language-"]{color:black;background:none;text-shadow:0 1px white;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none}}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#f5f2f0}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.markdown{color:#666;font-size:14px;line-height:1.8}.highlight{line-height:1.5}.markdown img{vertical-align:middle;max-width:100%}.markdown h1{color:#404040;font-weight:500;line-height:40px;margin-bottom:24px}.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{color:#404040;margin:1.6em 0 .6em 0;font-weight:500;clear:both}.markdown h1{font-size:28px}.markdown h2{font-size:22px}.markdown h3{font-size:18px}.markdown h4{font-size:16px}.markdown h5{font-size:14px}.markdown h6{font-size:12px}.markdown hr{height:1px;border:0;background:#e9e9e9;margin:16px 0;clear:both}.markdown p,.markdown pre{margin:1em 0}.markdown>p,.markdown>blockquote,.markdown>ol,.markdown>ul{width:80%}.markdown ul>li{list-style:circle}.markdown>ul li,.markdown blockquote ul>li{margin-left:20px;padding-left:4px}.markdown>ul li p,.markdown>ol li p{margin:.6em 0}.markdown ol>li{list-style:decimal}.markdown>ol li,.markdown blockquote ol>li{margin-left:20px;padding-left:4px}.markdown code{margin:0 3px}.markdown pre{border-radius:6px;background:#f7f7f7}.markdown pre code{border:none;padding:.5em;background:#f7f7f7;margin:0;display:block}.markdown strong,.markdown b{font-weight:600}.markdown>table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e9e9e9;width:80%;margin-bottom:24px}.markdown>table th{white-space:nowrap;color:#5C6B77;font-weight:600}.markdown>table th,.markdown>table td{border:1px solid #e9e9e9;padding:8px 16px;text-align:left}.markdown>table th{background:#F7F7F7}.markdown>table td:first-child{background:#fcfcfc;font-weight:500;width:18%}.markdown>table td:nth-child(2){min-width:30%;max-width:45%}.markdown>table td:first-child{background:#fcfcfc}.markdown>table tr td:nth-last-child(-n+2){width:13%;word-break:break-all}.markdown blockquote{font-size:90%;color:#999;border-left:4px solid #e9e9e9;padding-left:.8em;margin:1em 0;font-style:italic}.markdown blockquote p{margin:0}.markdown .anchor{opacity:0;transition:opacity .3s ease;margin-left:8px}.markdown .waiting{color:#ccc}.markdown h1:hover .anchor,.markdown h2:hover .anchor,.markdown h3:hover .anchor,.markdown h4:hover .anchor,.markdown h5:hover .anchor,.markdown h6:hover .anchor{opacity:1;display:inline-block}.markdown>br,.markdown>p>br{clear:both}.container{margin:auto;box-sizing:border-box;padding-left:10%;padding-right:200px}.meta{border-bottom:2px solid #eee;line-height:24px;color:#666}.code-box{border:1px solid #E9E9E9;border-radius:6px;display:inline-block;width:100%;position:relative;margin:0 0 16px 0;transition:all .5s ease}.code-box:hover{border-color:#ccc}.code-box:target{border:1px solid rgba(45,183,245,0.7);box-shadow:0 0 4px rgba(45,183,245,0.5)}.code-box:hover .code-box-meta,.code-box:target .code-box-meta{background:#fbfbfb}.code-box:hover .code-box-title,.code-box:target .code-box-title{background:#fbfbfb;box-shadow:0 -1.2px 0 #e9e9e9}.code-box .code-box-title a,.code-box .code-box-title a:hover{color:#666}.code-box .code-box-demo{padding:42px 20px 50px}.code-box .highlight{overflow:hidden;padding:5px;border-top:1px dashed #e9e9e9}.code-box pre{margin:0;width:auto}

    .demo-list{background-color:#fff;position:fixed;top:20px;right:10px;width:180px;border:1px solid #ddd;padding:0;border-radius:5px;list-style:none}.demo-list li{border-bottom:1px solid #ddd;border-left:3px solid #fff;padding:0 10px;line-height:26px;font-size:12px}.demo-list li.current{border-left:3px solid #f40}.demo-list li.current a{font-weight:700;color:#333}.demo-list li a{color:#36c;text-decoration:none}
  
    .markdown code {
      background: #f5f2f0;
      margin: 0 3px;
      padding: 2px 6px;
      border-radius: 3px;
      color: #dd4a68;
      font-size: .8rem;
      border: 1px solid #e9e9e9;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>
      {{#if htmlWebpackPlugin.options.meta.title}}
        {{{ htmlWebpackPlugin.options.meta.title }}} 
      {{/if}}
      {{#if htmlWebpackPlugin.options.meta.chinese}}
        {{{ htmlWebpackPlugin.options.meta.chinese }}} 
      {{/if}}
    </h1>
    <div class="markdown">
      {{{ htmlWebpackPlugin.options.readme }}}
    </div>
    {{#if htmlWebpackPlugin.options.demos.length}}
    <h3>DEMO 列表</h3>
    <div>
      {{#each htmlWebpackPlugin.options.demos}}
        <div class="preview" id="container_{{filename}}">
          <h3>{{title}}</h3>
          <div class="markdown">
            {{{ markdownContent }}}
          </div>
          <div class="code-box">
            <div class="code-box-demo">
              <div id="{{filename}}"></div>
            </div>
            <div class="markdown">
              <div class="highlight">
                <pre><code lang="jsx">{{{ highlightedCode }}}</code></pre>
              </div>
            </div>
          </div>
        </div>
      {{/each}}
    </div>
    <ul class="demo-list">
      <li>示例导航</li>
      {{#each htmlWebpackPlugin.options.demos}}
      <li><a href="#container_{{filename}}">{{title}}</a></li>
      {{/each}}
    </ul>
    {{/if}}
  </div>
  
</body>

</html>
